<template>
  <div>
    <div class="b-title">设施使用频率</div>
    <div class="content border-box" style="width: 100%">
      <div ref="chartRef" style="width: 100%; height: 15vh" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { colorArr, realWH } from "@/utils";
import { useECharts } from "@pureadmin/utils";
import { ref, computed, onMounted } from "vue";

const chartRef = ref();

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
});
const dataList = computed(() => {
  if (!props.data.length) {
    return [];
  }

  let list = [...props.data] as any;
  list.sort((a: any, b: any) => b.percent - a.percent);
  let sum = 0;
  const arr = list.map((item: any, index: number) => {
    const temp = { value: item?.percent, name: item?.facilityName };
    if (index < list.length - 1) {
      sum = sum - 0 + item.percent;
    } else {
      temp.value = (100 - sum).toFixed(1); // 最后一个数100-其他
    }
    return temp;
  });
  return arr;
});

const { setOptions } = useECharts(chartRef, {
  renderer: "svg"
});
const initData = () => {
  const fontSize = realWH(16).h;
  setOptions({
    legend: {
      left: 10,
      orient: "vertical",
      type: "scroll",
      textStyle: {
        color: "#FFFFFF",
        fontSize
      },
      icon: "circle",
      itemWidth: realWH(14).h,
      itemHeight: realWH(14).h,
      itemStyle: {
        borderWidth: 0
      }
    },
    tooltip: {
      trigger: "item"
    },
    color: colorArr,
    series: [
      {
        type: "pie",
        radius: ["25%", "70%"],
        center: ["65%", "50%"],
        avoidLabelOverlap: false,
        roseType: "area",
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 0
        },
        label: {
          show: true,
          formatter: "{c}%",
          // position: "center",
          fontSize
        },
        data: dataList.value
      }
    ]
  });
};
initData();
</script>
